import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:goumao_app/Controller/gm_cw_danan.dart';
import 'package:goumao_app/Customs/gm_app_util.dart';
import 'package:image_picker/image_picker.dart';

class GMPetSendScreen extends StatefulWidget {
  const GMPetSendScreen({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _GMPetSendScreenState createState() => _GMPetSendScreenState();
}

class _GMPetSendScreenState extends State<GMPetSendScreen> {
  List<File>? images = [];

  // 打开图片浏览器
  Future _getImage() async {
    final picker = ImagePicker();
    List<XFile>? temp = await picker.pickMultiImage();
    for (XFile image in temp) {
      images?.add(File(image.path));
    }
    setState(() {});
  }

  List<Widget> buildImgPick() {
    List<Widget> result = [];
    int imagesLength = images?.length ?? 0;
    if (images!.isNotEmpty) {
      for (var i = 0; i < images!.length; i++) {
        result.add(ClipRRect(
          borderRadius: BorderRadius.circular(6),
          child: Image.file(
            images![i],
            fit: BoxFit.cover,
            width: 73,
            height: 73,
          ),
        ));
      }
    }
    if (imagesLength < 3) {
      result.add(
        InkWell(
          onTap: () {
            _getImage();
          },
          child: Image.asset(
            "assets/images/gm_add_img_icon@2x.png",
            width: 73,
            height: 73,
          ),
        ),
      );
    }
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF8F8F8),
      appBar: AppBar(
        elevation: 0,
        title: const Text(
          '送养',
          style: TextStyle(
              color: Color(0xff333333),
              fontSize: 16,
              fontWeight: FontWeight.w800),
        ),
      ),
      body: SafeArea(
        child: Column(
          children: [
            // 可滑动的页面
            Expanded(
              child: SingleChildScrollView(
                  child: Container(
                padding: const EdgeInsets.fromLTRB(16, 12, 16, 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    GMPetSendSubView(
                        title: "宠物信息",
                        content: SizedBox(
                          height: 80,
                          child: images!.isEmpty
                              ? Row(
                                  children: [
                                    InkWell(
                                      onTap: () {
                                        _getImage();
                                      },
                                      child: Image.asset(
                                        "assets/images/gm_add_img_icon@2x.png",
                                        width: 73,
                                        height: 73,
                                      ),
                                    ),
                                    const SizedBox(
                                      width: 12,
                                    ),
                                    const Expanded(
                                        child: Text(
                                      "请发布真实的图片(每张照片包含同一只宠物)，严禁发布广告，虚假信息等，否则将封号处理",
                                      style: TextStyle(
                                        color: Color(0xff999999),
                                        fontSize: 14,
                                      ),
                                      maxLines: null,
                                      softWrap: true,
                                    ))
                                  ],
                                )
                              : GridView(
                                  physics:
                                      const NeverScrollableScrollPhysics(), //增加
                                  // shrinkWrap: true, //增加
                                  gridDelegate:
                                      SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 4,
                                    crossAxisSpacing: 10.w, //水平 widget的距离
                                  ),
                                  children: buildImgPick(),
                                ),
                        )),
                    const SizedBox(
                      height: 16,
                    ),
                    const GMPetSendSubView(
                        title: "宠物信息",
                        content: Column(
                          children: [
                            GMDananItem(
                              title: "昵称",
                              placeTitle: "请输入昵称",
                              value: "",
                              padding: EdgeInsets.all(0),
                            ),
                            GMDananItem(
                              title: "类别",
                              placeTitle: "请选择宠物类别",
                              value: "",
                              padding: EdgeInsets.all(0),
                            ),
                            GMDananItem(
                              title: "性别",
                              placeTitle: "请设置宠物性别",
                              value: "",
                              padding: EdgeInsets.all(0),
                            ),
                            GMDananItem(
                              title: "年龄",
                              placeTitle: "请设置宠物年龄",
                              value: "",
                              padding: EdgeInsets.all(0),
                            ),
                          ],
                        )),
                    const SizedBox(
                      height: 16,
                    ),
                    GMPetSendSubView(
                        title: "详细内容",
                        content: Container(
                          padding: const EdgeInsets.fromLTRB(12, 12, 12, 12),
                          height: 160,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: const Color(0xfff5f5f5)),
                          child: const TextField(
                            autofocus: true,
                            maxLength: 200,
                            maxLines: 6,
                            cursorColor: Color(0xff1a1a1a),
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "说一说详细内容，比如是否疫苗，是否绝育等情况",
                                hintStyle: TextStyle(
                                    color: Color(0xff999999),
                                    fontSize: 15,
                                    fontWeight: FontWeight.w400)),
                          ),
                        ))
                  ],
                ),
              )),
            ),
            // 底部固定高度的 Container
            Container(
              height: 74.0,
              color: const Color(0xffffffff),
              padding: const EdgeInsets.fromLTRB(33, 8, 33, 16),
              child: InkWell(
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: GMAppUtil.kAppThemColor),
                  child: const Center(
                    child: Text(
                      "保存",
                      style: TextStyle(
                          color: Color(0xffffffff),
                          fontSize: 15,
                          fontWeight: FontWeight.w400),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class GMPetSendSubView extends StatelessWidget {
  final String title;
  final Widget content;
  const GMPetSendSubView(
      {super.key, required this.title, required this.content});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(12, 12, 12, 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: GMAppUtil.kWhiteColor,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
                color: Color(0xff333333),
                fontSize: 16,
                fontWeight: FontWeight.w500),
          ),
          const SizedBox(
            height: 12,
          ),
          content
        ],
      ),
    );
  }
}
